<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>全部精品电子书</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/header.css">
    <link rel="stylesheet" href="css/footer.css">
    <link rel="stylesheet" href="css/product_list.css">
</head>
<body>
<div class="main">
    <!--1.页头-->
    <header class="header"></header>
    <!--2.内容-->
    <section class="section">
        <!--2.1导航-->
        <div class="list-nav">
            <!--2.1.1 全部图书-->
            <ul class="w-list">
                <li class="all">
                    <div class="w-wrap">
                        <a class="back" href="#">
                            <span class="ttl">全部图书</span>
                            <em class="num">79847</em>
                            <b></b>
                        </a>
                    </div>
                </li>
                <li class="level1">
                    <div class="w-wrap">
                        <a class="back" href="#">
                            <span class="ttl">小说</span>
                            <em class="num">15047</em>
                            <b></b>
                        </a>
                    </div>
                </li>
                <li class="level1">
                    <div class="w-wrap">
                        <a class="back" href="#">
                            <span class="ttl">经管</span>
                            <em class="num">8484</em>
                            <b></b>
                        </a>
                    </div>
                </li>
                <li class="level1">
                    <div class="w-wrap">
                        <a class="back" href="#">
                            <span class="ttl">小说</span>
                            <em class="num">15047</em>
                            <b></b>
                        </a>
                    </div>
                </li>
                <li class="level1">
                    <div class="w-wrap">
                        <a class="back" href="#">
                            <span class="ttl">经管</span>
                            <em class="num">8484</em>
                            <b></b>
                        </a>
                    </div>
                </li>
                <li class="level1">
                    <div class="w-wrap">
                        <a class="back" href="#">
                            <span class="ttl">小说</span>
                            <em class="num">15047</em>
                            <b></b>
                        </a>
                    </div>
                </li>
                <li class="level1">
                    <div class="w-wrap">
                        <a class="back" href="#">
                            <span class="ttl">经管</span>
                            <em class="num">8484</em>
                            <b></b>
                        </a>
                    </div>
                </li>
                <li class="level1">
                    <div class="w-wrap">
                        <a class="back" href="#">
                            <span class="ttl">小说</span>
                            <em class="num">15047</em>
                            <b></b>
                        </a>
                    </div>
                </li>
                <li class="level1">
                    <div class="w-wrap">
                        <a class="back" href="#">
                            <span class="ttl">经管</span>
                            <em class="num">8484</em>
                            <b></b>
                        </a>
                    </div>
                </li>
                <li class="level1">
                    <div class="w-wrap">
                        <a class="back" href="#">
                            <span class="ttl">小说</span>
                            <em class="num">15047</em>
                            <b></b>
                        </a>
                    </div>
                </li>
                <li class="level1">
                    <div class="w-wrap">
                        <a class="back" href="#">
                            <span class="ttl">经管</span>
                            <em class="num">8484</em>
                            <b></b>
                        </a>
                    </div>
                </li>
                <li class="level1">
                    <div class="w-wrap">
                        <a class="back" href="#">
                            <span class="ttl">小说</span>
                            <em class="num">15047</em>
                            <b></b>
                        </a>
                    </div>
                </li>
                <li class="level1">
                    <div class="w-wrap">
                        <a class="back" href="#">
                            <span class="ttl">经管</span>
                            <em class="num">8484</em>
                            <b></b>
                        </a>
                    </div>
                </li>
            </ul>
            <!--2.1.2 特约推荐-->
            <div class="w-category">
                <h3>特约推荐</h3>
                <div class="slider">
                    <ul class="u-aimg">
                        <li>
                            <a href="#">
                                <img src="img/product_list/category-1.jpg" alt="">
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <img src="img/product_list/category-1.jpg" alt="">
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <img src="img/product_list/category-1.jpg" alt="">
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <!--2.2全部图书展示-->
        <div class="m-category">
            <div class="u-nav-crumbs">
                <span>全部图书</span>
            </div>
            <!--nav小导航-->
            <div class="u-nav-tab">
                <ul>
                    <li class="item crt"><a class="utd" href="#" data-list="sell">畅销</a></li>
                    <li class="item"><a class="utd" href="#" data-list="new">最新</a></li>
                    <li class="item"><a class="utd" href="#" data-list="evaluate">评价</a></li>
                    <li class="item"><a class="utd" href="#" data-list="price">价格</a></li>
                </ul>
                <div class="box"></div>
            </div>
            <!--图书list-->
            <div class="cnt">
                <ul class="sell j-list">
                    <li class="u-bookitm1">
                        <div class="cover">
                            <a href="#">
                                <img src="img/product_list/book-list-1.jpg" alt="">
                            </a>
                            <div class="u-price">
                                <em>¥ 7.99</em>
                                <del>¥ 36.00</del>
                            </div>
                        </div>
                        <div class="info">
                            <a class="title" href="#">三体（全三册）</a>
                            <div class="u-stargrade">
                                <div class="icon"></div>
                                <span class="num"> ( 20 ) </span>
                            </div>
                            <div class="author">
                                <span>刘慈欣</span>
                            </div>
                            <p class="desc">他单枪匹马，把中国科幻提升到了世界水平。雷军力推！</p>
                        </div>
                        <div class="act">
                            <span>
                                <a class="icon-cart" href="javascirpt:;"></a>
                                <a class="icon-heart" href="javascirpt:;"></a>
                            </span>
                        </div>
                    </li>
                </ul>
                <ul class="new j-list"></ul>
                <ul class="evaluate j-list"></ul>
                <ul class="price j-list"></ul>
                <ul class="page-turn"></ul>
            </div>
        </div>
        <div class="turn-page">
            <ul>
                <li><a href="#">上一页</a></li>
                <li><a href="#">1</a></li>
                <li><a href="#">2</a></li>
                <li class="active"><a href="#">3</a></li>
                <li><a href="#">4</a></li>
                <li><a href="#">5</a></li>
                <li><a href="#">下一页</a></li>
            </ul>
        </div>
    </section>
    <!--3.页尾-->
    <footer class="footer-1"></footer>
</div>
</body>
<script src="js/jquery-1.11.3.js"></script>
<script src="js/ajax.js"></script>
<script src="js/header.js"></script>
<script src="js/product_list.js"></script>
<script src="js/footer.js"></script>
</html>